<template>
    <div class="wrapper">
        <div style="display: flex;justify-content: center;background: #FFFFFF;">
            <el-menu :default-active="activeIndex" active-text-color="#ff7b33" :text-color="'#333333'"
                class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1">首页</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">演出分类</template>
                    <el-menu-item index="2-1">流行</el-menu-item>
                    <el-menu-item index="2-2">直播</el-menu-item>
                    <el-menu-item index="2-3">音乐节</el-menu-item>
                    <el-menu-item index="2-4">其他</el-menu-item>
                </el-submenu>
                <el-menu-item index="3"> <el-input placeholder="搜索演出名称" prefix-icon="el-icon-search"
                        v-model="title" /></el-menu-item>
            </el-menu>
        </div>
        <div style="display: flex;justify-content: space-between;padding: 0 100px;">
            <div style="width: 100%;">
                <div class="allType">
                    <div class="typeLine">
                        <div class="typeItems">
                            <div class="typeBtn typeAct">所有订单</div>
                            <!-- <div class="typeBtn">待付款</div>
                            <div class="typeBtn">已观看</div>
                            <div class="typeBtn">待评价</div>
                            <div class="typeBtn">已评价</div> -->
                        </div>

                    </div>
                 
                </div>
                <div class="allShowBox">
                  
                    <div class="List">
                        <div class="itemBox" v-for="item in tableData" :key="item.id">
                            <img class="imgClass" src="@/assets/haib.png" alt="">
                            <div class="pickBox">
                                <div class="picTitle">{{ item.title}}</div>
                                <div class="picDate">{{item.changguan }}</div>
                                <div class="picDate">{{ item.date }}</div>

                            </div>
                            <div class="picBom">
                               <span style="font-size: 16px;color: gry;">
                                    共{{item.num}}张</span> <div class="picHot">{{ '￥ '+item.price }}
                                </div>
                                <div class="buyBtn" >查看评价</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
      
        </div>
        <!-- <div style="padding: 20px 0;"><el-pagination @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 5, 10, 20]"
                :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination></div> -->
        
    </div>
</template>

<script>

export default {
    name: "buyTickets",
    data() {
        return {
            activeIndex: '1',
            value1: 4,
            title: '',
            activeName: '1',
            tableData: [],
            total: 0,
            pageNum: 1,
            pageSize: 10,
            form: {},
            dialogFormVisible: false,
            pass: {},
        }
    },
    created() {
        this.load()
    },
    methods: {
        load() {
            this.request.get("/vocalOrder/myOrder", {
                // params: {
                //     pageNum: this.pageNum,
                //     pageSize: this.pageSize,
                // }
            }).then(res => {
                this.tableData = res.data
                // this.total = res.data.total
                console.log(this.tableData);
            })
        },

        handleSizeChange(pageSize) {
            console.log(pageSize)
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum)
            this.pageNum = pageNum
            this.load()
        },
       
        
    }
}
</script>

<style scoped>




.picHot {
    color: #f00;
    font-size: 24px;
}

.buyBtn {
    background: #ff7b33;
    border-radius: 10px;
    width: 117px;
    height: 41px;
    font-size: 17px;
    line-height: 41px;
    color: #fff;
    text-align: center;
    margin-top: 30px;
    cursor: pointer;
}

.picBom {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.picTitle {
    height: 40px;
    font-size: 19px;
    font-weight: 600;
    color: #242424;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.picDate {
    height: 22px;
    margin-top: 18px;
    color: #fff;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.imgClass {
    width: 144px;
    height: 193px;
    border-radius: 25px;
}

.pickBox {
    width: 100%;
    margin-left: 16px;
}

.itemBox {
    /* background: #fff; */
   background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
    padding: 10px;
    border-radius: 25px;
    display: flex;
    /* justify-content: center; */
    margin-top: 10px;
    /* border-bottom: 1px solid #e5e5e5; */
}

.List {
    padding: 0 10px;
    width: 45%;
    /* height: 590px; */
    overflow: auto;
    border-radius: 0 0 25px 25px;
    /* 当内容超出时显示滚动条 */
    /* overflow: hidden; */
}

.List::-webkit-scrollbar {

    display: none;

}






.wrapper {
    /* padding: 50px 100px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #EFF3F5;
}



.allType {
    /* width: 50%; */
    margin-top: 20px;
    background: #FFFFFF;
    padding: 20px;
}

.typeLine {
    display: flex;
    justify-content: flex-start;
    padding: 8px 0;
}

.typeItems {
    display: flex;gap: 20px;
}


.typeBtn {
    /* border-radius: 25px; */
    padding: 0px 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    color: #2d3e4f;
    line-height: 24px;
    

}

.typeAct {
    /* background: #ff7b33; */
    color: #ff7b33;
     border-bottom: 2px solid #ff7b33;
}

.typeBtn:hover {
    /* background: #ff7b33; */
    border-bottom: 2px solid #ff7b33;
    color: #ff7b33;


}

.allShowBox {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    background: #FFFFFF;
}

</style>